<template>
  <div class="trading_nav">
    <headTop :headClass="'white_header'">YTCCTrading hall</headTop>
    <div class="nav_list" :class="`active${activeNum}`">
      <div class="nav_item" :class="{'active': this.activeNum === 0}" @click="tabActive(0)">Purchase</div>
      <div class="nav_item" :class="{'active': this.activeNum === 1}" @click="tabActive(1)">Sell out</div>
      <div class="nav_item" :class="{'active': this.activeNum === 2}" @click="tabActive(2)">My order</div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'tradingNav',
  data () {
    return {
      activeNum: 0,
      navList: [
        {
          title: 'Purchase',
          path: 'tradingPurchase'
        },
        {
          title: 'Sell out',
          path: 'tradingSale'
        },
        {
          title: 'My order',
          path: 'order'
        }
      ]
    };
  },
  mounted () {
    this.navIndexs();
  },
  beforeUpdate () {
    this.navIndexs();
  },
  methods: {
    tabActive (num) {
      this.activeNum = num;
      this.$router.replace({path: this.navList[num].path, query: {type: num}});
    },
    navIndexs () {
      if (this.$route.name === 'tradingPurchase') {
        this.activeNum = 0;
      } else if (this.$route.name === 'tradingSale') {
        this.activeNum = 1;
      } else {
        this.activeNum = 2;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/mixin.scss';
  .trading_nav{
    padding-top: 176px;
    background-color: #f5f5f5;
    height: 100%;
    display: flex;
    flex-direction: column;
    .nav_list{
      width: 100%;
      display: flex;
      height: 86px;
      position: absolute;
      top: 90px;
      left: 0;
      background-color: #fff;
      .nav_item{
        flex: 1;
        height: 100%;
        line-height: 86px;
        text-align: center;
        font-size: 28px;
        color: #999;
        &.active{
          color: $color;
        }
      }
      &::after{
        display: block;
        content: '';
        width: 33.33%;
        height: 4px;
        background-color: $color;
        position: absolute;
        bottom: 0;
        transition: left .3s linear;
      }
      &.active0::after{
        content: '';
        left: 0;
      }
      &.active1::after{
        content: '';
        left: 33.33%;
      }
      &.active2::after{
        content: '';
        left: 66.66%;
      }
    }
  }
</style>
